<template>
    <div>
        <div class="operarea">
            <div class="btnList">
                <el-button size="mini" @click="addDataShow(true, '')">{{$t("add")}}</el-button>
            </div>
        </div>
        <el-card class="cardBox">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>物料编码规则</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="block">
                <el-tree style="width: 100%;" icon-class="el-icon-arrow-right" :data="matCodeRuleList" row-key="node" :accordion="true" :props="{ label: 'name', children: 'children' }" @node-expand="changeSta">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                        <span class="operation">
                            <el-button type="primary" size="mini" @click.stop="addDataShow(false, data)" v-if="data.level !== 5">{{$t('add')}}</el-button>
                            <el-button type="primary" size="mini" @click.stop="showEdit(data)">编辑</el-button>
                            <el-button type="primary" size="mini" @click.stop="showDel(data)">{{$t('delete')}}</el-button>
                        </span>
                    </span>
                </el-tree>
            </div>
        </el-card>
        <!-- 添加根节点 -->
        <el-dialog :title="$t('add')" :visible.sync="addBaseDialogVisible" width="500px" class="smallDlog" :close-on-click-modal="false" @close="addBaseDlogClose(addBaseRootCode)">
            <el-form :model="addBaseRootCode" :rules="addBaseRules" :ref="addBaseRootCode" class="motuoForm">
                <el-form-item :label="$t('encoding')" label-width="70px" prop="code">
                    <el-input v-model="addBaseRootCode.code" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('name')" label-width="70px" prop="name">
                    <el-input v-model="addBaseRootCode.name" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('type')" label-width="70px" prop="type">
                    <el-input v-model="addBaseRootCode.type" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addBaseDialogVisible = false">{{$t("cancel")}}</el-button>
                <el-button type="primary" @click="addBaseMatEncode(addBaseRootCode)">{{$t("confirm")}}</el-button>
            </span>
        </el-dialog>
        <!-- 添加 -->
        <el-dialog :title="$t('add')" :visible.sync="addDialogVisible" width="500px" class="smallDlog" :close-on-click-modal="false" @close="addDlogClose(addRootCode)">
            <el-form :model="addRootCode" :rules="addRules" :ref="addRootCode" class="motuoForm">
                <el-form-item :label="$t('encoding')" label-width="70px" prop="code">
                    <el-input v-model="addRootCode.code" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('name')" label-width="70px" prop="name">
                    <el-input v-model="addRootCode.name" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">{{$t("cancel")}}</el-button>
                <el-button type="primary" @click="addMatEncode(addRootCode)">{{$t("confirm")}}</el-button>
            </span>
        </el-dialog>
        <!-- 修改 -->
        <el-dialog :title="$t('modify')" :visible.sync="modifyDialogVisible" width="500px" class="smallDlog" :close-on-click-modal="false" @close="modifyDlogClose(modifyDataForm)">
            <el-form :model="modifyDataForm" :rules="modifyRules" :ref="modifyDataForm" class="motuoForm">
                <el-form-item :label="$t('name')" label-width="70px" prop="name">
                    <el-input v-model="modifyDataForm.name" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="modifyDialogVisible = false">{{$t("cancel")}}</el-button>
                <el-button type="primary" @click="modifyMatEncode(modifyDataForm)">{{$t("confirm")}}</el-button>
            </span>
        </el-dialog>
        <!-- 删除 -->
        <el-dialog :title="$t('hint')" :visible.sync="delDialogVisible" width="420px" class="smallDlog" :close-on-click-modal="false">
            <span>{{$t('confirmdel')}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="delData">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getMatCode,
    addParMatCode,
    deleteMatCode,
    modifyMatCode,
    getMaxNumFromChild
} from '@/libs/reqlist.js'
export default {
    data() {
        var isletter = (rule, value, callback) => {
            var pattern = /^([A-Z]{1})?$/
            if (!pattern.test(value)) {
                return callback(new Error('请输入一位大写字母'))
            } else {
                callback()
            }
        }
        var isKong = (rule, value, callback) => {
            var pattern = value - 0
            if (pattern == 0) {
                return callback(new Error('编码不能全为0'))
            } else {
                callback()
            }
        }
        return {
            matEncode: {
                level: 1,
                type: '',
                parentNode: '',
            },
            matCodeRuleList: [],
            // 保存各级展开行，方便数据更新
            firstNode: {},
            secondNode: {},
            thirdNode: {},
            fourthNode: {},
            // 当前操纵level
            doToLevel: 0,
            fakeid: 10000,
            addBaseDialogVisible: false,
            addBaseRootCode: {
                code: '',
                name: '',
                level: 1,
                type: '',
            },
            addBaseRules: {
                code: [
                    { required: true, message: this.$t("cannotbeemp"), trigger: "blur" },
                    { validator: isletter, trigger: 'blur' }
                ],
                name: [
                    { required: true, message: this.$t("cannotbeemp"), trigger: "blur" }
                ],
                type: [
                    { required: true, message: this.$t("cannotbeemp"), trigger: "blur" }
                ]
            },
            addRootCode: {
                code: '',
                name: '',
                level: '',
                type: '',
            },
            addRules: {
                code: [
                    { required: true, message: this.$t("cannotbeemp"), trigger: "blur" },
                    { validator: isKong, trigger: 'blur' }
                ],
                name: [
                    { required: true, message: this.$t("cannotbeemp"), trigger: "blur" }
                ],
                type: [
                    { required: true, message: this.$t("cannotbeemp"), trigger: "blur" }
                ]
            },
            addDialogVisible: false,
            addCodeItem: {},
            modifyDialogVisible: false,
            modifyDataForm: {
                code: '',
                name: '',
                node: ''
            },
            modifyRules: {
                code: [
                    { required: true, message: this.$t("cannotbeemp"), trigger: "blur" }
                ],
                name: [
                    { required: true, message: this.$t("cannotbeemp"), trigger: "blur" }
                ]
            },
            modifyCodeItem: {},
            delDialogVisible: false,
            delNode: {
                node: '',
                level: 0,
                type: ''
            },
            deleteCodeItem: {}
        }
    },
    methods: {
        getMatEnCode() {
            getMatCode(JSON.stringify(this.matEncode)).then(res => {
                if (res.data.code == 0) {
                    for (let i = 0; i <= res.data.data.length - 1; i++) {
                        let item = res.data.data[i]
                        item.name = item.code + ' ' + item.name
                        item.children = []
                        if (item.hasChildren == true) {
                            delete item.hasChildren
                            item.children = [
                               { node: this.fakeid++ }
                           ]
                        }
                    }
                    this.matCodeRuleList = res.data.data
                }
            })
        },
        changeSta(expandedRows) {
            switch (expandedRows.level) {
                case 1:
                    this.firstNode = expandedRows
                    break
                case 2:
                    this.secondNode = expandedRows
                    break
                case 3:
                    this.thirdNode = expandedRows
                    break
                case 4:
                    this.fourthNode = expandedRows
                    break
            }
            this.matEncode.level = expandedRows.level + 1
            this.matEncode.type = expandedRows.type
            this.matEncode.parentNode = expandedRows.node
            this.getSecChildren(expandedRows)
        },
        getSecChildren(nodeItem) {
            getMatCode(JSON.stringify(this.matEncode)).then(res => {
                if (res.data.code == 0) {
                    switch (nodeItem) {
                        case '':
                            for (let i = 0; i <= res.data.data.length - 1; i++) {
                                let item = res.data.data[i]
                                item.name = item.code + ' ' + item.name
                                item.children = []
                                if (item.hasChildren == true) {
                                    delete item.hasChildren
                                        item.children = [
                                        { node: this.fakeid++ }
                                    ]
                                }
                            }
                            this.matCodeRuleList = res.data.data
                            break
                        default:
                            delete nodeItem.hasChildren
                            for (let i = 0; i <= res.data.data.length - 1; i++) {
                                res.data.data[i].children = []
                                let item = res.data.data[i]
                                item.name = item.code + ' ' + item.name
                                if (item.hasChildren === true) {
                                    delete item.hasChildren
                                    item.children = [
                                        { node: this.fakeid++ }
                                    ]
                                }
                            }
                            nodeItem.children = res.data.data
                    }
                }
            })
        },
        addMatEncode(form) {
            this.$refs[form].validate((valid) => {
                if (!valid) return;
                addParMatCode(JSON.stringify(this.addRootCode)).then(res => {
                    if (res.data.code == 0) {
                        this.$message({
                            type: 'success',
                            message: this.$t('newmaterialcategoryadded')
                        })
                        this.addDialogVisible = false
                        this.matEncode.parentNode = this.addRootCode.parentNode
                        this.matEncode.type = this.addRootCode.type
                        this.matEncode.level = this.addRootCode.level
                        this.getSecChildren(this.addCodeItem)
                    }
                })
            })
        },
        addBaseMatEncode(form) {
            this.$refs[form].validate((valid) => {
                if (!valid) return;
                addParMatCode(JSON.stringify(this.addBaseRootCode)).then(res => {
                    if (res.data.code == 0) {
                        this.$message({
                            type: 'success',
                            message: this.$t('newmaterialcategoryadded')
                        })
                        this.addBaseDialogVisible = false
                        this.matEncode.parentNode = ''
                        this.matEncode.type = ''
                        this.matEncode.level = 1
                        this.getSecChildren(this.addCodeItem)
                    }
                })
            })
        },
        addDataShow(flag, item) {
            switch (flag) {
                case true:
                    this.addRootCode.level = 1
                    this.addCodeItem = item
                    this.addBaseDialogVisible = true
                    break;
                case false:
                    getMaxNumFromChild(JSON.stringify({ node: item.node })).then(res => {
                        if (res.data.code == 0) {
                            this.addRootCode.code = res.data.data
                        }
                    })
                    this.addRootCode.level = item.level + 1
                    this.addRootCode.type = item.type
                    this.addRootCode.parentNode = item.node
                    this.addCodeItem = item
                    this.addDialogVisible=true
                    break;
            }
        },
        addBaseDlogClose(form) {
            this.$refs[form].resetFields();
        },
        addDlogClose(form) {
            this.addRootCode.type = ''
            this.$refs[form].resetFields();
        },
        showEdit(item) {
            this.modifyDataForm.code = item.code
            this.modifyDataForm.name = item.name.split(' ')[1]
            this.modifyDataForm.node = item.node
            this.doToLevel = item.level
            this.modifyDialogVisible = true
        },
        modifyMatEncode(form) {
            this.$refs[form].validate((valid) => {
                if (!valid) return;
                modifyMatCode(JSON.stringify(this.modifyDataForm)).then(res => {
                    if (res.data.code == 0) {
                        this.$message.success(this.$t('modifysuc'))
                        this.modifyDialogVisible = false
                        switch (this.doToLevel) {
                            case 1:
                                this.matEncode.parentNode = ''
                                this.matEncode.type = ''
                                this.matEncode.level = 1
                                this.getSecChildren('')
                                break
                            case 2:
                                this.modifyCodeItem = this.firstNode
                                this.matEncode.parentNode = this.modifyCodeItem.node
                                this.matEncode.type = this.modifyCodeItem.type
                                this.matEncode.level = this.modifyCodeItem.level + 1
                                this.getSecChildren(this.modifyCodeItem)
                                break
                            case 3:
                                this.modifyCodeItem = this.secondNode
                                this.matEncode.parentNode = this.modifyCodeItem.node
                                this.matEncode.type = this.modifyCodeItem.type
                                this.matEncode.level = this.modifyCodeItem.level + 1
                                this.getSecChildren(this.modifyCodeItem)
                                break
                            case 4:
                                this.modifyCodeItem = this.thirdNode
                                this.matEncode.parentNode = this.modifyCodeItem.node
                                this.matEncode.type = this.modifyCodeItem.type
                                this.matEncode.level = this.modifyCodeItem.level + 1
                                this.getSecChildren(this.modifyCodeItem)
                                break
                            case 5:
                                this.modifyCodeItem = this.fourthNode
                                this.matEncode.parentNode = this.modifyCodeItem.node
                                this.matEncode.type = this.modifyCodeItem.type
                                this.matEncode.level = this.modifyCodeItem.level + 1
                                this.getSecChildren(this.modifyCodeItem)
                                break
                        }
                    }
                })
            })
        },
        modifyDlogClose(form) {
            this.$refs[form].resetFields();
        },
        showDel(item) {
            this.delNode.node = item.node
            this.delNode.level = item.level
            this.delNode.type = item.type
            this.doToLevel = item.level
            this.delDialogVisible = true
        },
        delData() {
            deleteMatCode(JSON.stringify(this.delNode)).then(res => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: this.$t('delsuc')
                    })
                    this.delDialogVisible = false
                    switch (this.doToLevel) {
                            case 1:
                                this.matEncode.parentNode = ''
                                this.matEncode.type = ''
                                this.matEncode.level = 1
                                this.getSecChildren('')
                                break
                            case 2:
                                this.deleteCodeItem = this.firstNode
                                this.matEncode.parentNode = this.deleteCodeItem.node
                                this.matEncode.type = this.deleteCodeItem.type
                                this.matEncode.level = this.deleteCodeItem.level + 1
                                this.getSecChildren(this.deleteCodeItem)
                                break
                            case 3:
                                this.deleteCodeItem = this.secondNode
                                this.matEncode.parentNode = this.deleteCodeItem.node
                                this.matEncode.type = this.deleteCodeItem.type
                                this.matEncode.level = this.deleteCodeItem.level + 1
                                this.getSecChildren(this.deleteCodeItem)
                                break
                            case 4:
                                this.deleteCodeItem = this.thirdNode
                                this.matEncode.parentNode = this.deleteCodeItem.node
                                this.matEncode.type = this.deleteCodeItem.type
                                this.matEncode.level = this.deleteCodeItem.level + 1
                                this.getSecChildren(this.deleteCodeItem)
                                break
                            case 5:
                                this.deleteCodeItem = this.fourthNode
                                this.matEncode.parentNode = this.deleteCodeItem.node
                                this.matEncode.type = this.deleteCodeItem.type
                                this.matEncode.level = this.deleteCodeItem.level + 1
                                this.getSecChildren(this.deleteCodeItem)
                                break
                        }
                }
            })
        }
    },
    mounted() {
        this.getMatEnCode()
    }
}
</script>

<style lang="less" scoped>
@import './codeRuleList.less';
</style>
